import { NavBar, SearchBar, CapsuleTabs, Tag, DotLoading } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { useEffect, useMemo, useState } from 'react'
import axios from '../../api/http'

function Index() {
  const nav=useNavigate()
  const [loading,setLoading]=useState(false)
  const [keyword,setKeyword]=useState('')
  const [hotDept] = useState<string[]>(['妇产科','儿科','皮肤科','消化内科','呼吸内科','耳鼻喉科','中医科','肿瘤科'])
  const [activeDept,setActiveDept]=useState<string>('')
  const [list,setList]=useState<any[]>([])

  useEffect(()=>{
    setLoading(true)
    axios.get('/doctor/detail').then((res:any)=>{
      if(res && (res.code===20000 || Array.isArray(res))){
        const data = res.data || res || []
        setList(Array.isArray(data)?data:[])
      } else {
        setList([])
      }
    }).finally(()=>setLoading(false))
  },[])

  const filtered = useMemo(()=>{
    const kw = keyword.trim()
    return (list||[]).filter((item:any)=>{
      const name = item?.doctorname || item?.name || ''
      const hospital = item?.socoadmin || item?.hospital || ''
      const dept = item?.doctorministre || ''
      const kwMatch = kw ? (name+hospital+dept).includes(kw) : true
      const deptMatch = activeDept ? (dept?.includes(activeDept)) : true
      return kwMatch && deptMatch
    })
  },[list,keyword,activeDept])

  return (
    <div style={{background:'#fff',minHeight:'100vh'}}>
      <NavBar onBack={()=>nav(-1)}>问专家</NavBar>

      <div style={{padding:'8px 12px'}}>
        <SearchBar
          placeholder='搜索医生、医院或疾病症状'
          value={keyword}
          onChange={setKeyword}
          clearable
        />
      </div>

      <div style={{padding:'0 12px'}}>
        <div style={{fontSize:'16px',fontWeight:600,margin:'8px 0'}}>热门科室</div>
        <div style={{display:'flex',flexWrap:'wrap',gap:'12px 14px'}}>
          {hotDept.map(d=> (
            <span
              key={d}
              onClick={()=> setActiveDept(prev => prev===d ? '' : d)}
              style={{
                padding:'8px 18px',
                background: activeDept===d ? '#eaf3ff' : '#f6f7f9',
                color: activeDept===d ? '#1677ff' : '#333',
                borderRadius:'999px',
                fontSize:'14px',
                cursor:'pointer'
              }}
            >{d}</span>
          ))}
        </div>

        <div style={{display:'flex',justifyContent:'space-between',margin:'16px 0',color:'#666',fontSize:'14px'}}>
          <span onClick={()=>setActiveDept('')} style={{cursor:'pointer'}}>全部科室 ▾</span>
          <span style={{cursor:'default'}}>全国 ▾</span>
          <span style={{cursor:'default'}}>筛选 ▾</span>
        </div>
      </div>

      {loading ? (
        <div style={{display:'flex',justifyContent:'center',alignItems:'center',padding:'40px 0',color:'#999'}}>
          <DotLoading /> <span style={{marginLeft:8}}>加载中...</span>
        </div>
      ) : (
        <div style={{padding:'0 12px'}}>
          {filtered.map((item:any,index:number)=>{
            const name = item?.doctorname || item?.name || '专家'
            const avatar = item?.doctorimage || item?.avatar || 'https://via.placeholder.com/56'
            const title = item?.doctorstate || item?.doctortitle || ''
            const hospital = item?.socoadmin || item?.hospital || ''
            const dept = item?.doctorministre || ''
            const desc = item?.doctorinfo || item?.description || '擅长：本身擅长于全科常见疾病诊断与处理。'
            const good = item?.goodrate || 100
            const order = item?.orders || 127
            const view = item?.views || item?.doctorlook || 62369
            const price = item?.doctorprice || item?.price || 30
            return (
              <div key={item.doctorid || item.id || index} style={{background:'#fff',borderRadius:'12px',padding:'12px',marginBottom:'12px',boxShadow:'0 0 0 1px #f0f0f0'}}>
                <div style={{display:'flex',alignItems:'center',gap:'12px'}}>
                  <img src={avatar} alt="avatar" style={{width:'48px',height:'48px',borderRadius:'50%'}}/>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{display:'flex',alignItems:'center',gap:'8px'}}>
                      <div style={{fontSize:'16px',fontWeight:600}}>{name}</div>
                      {title ? <span style={{fontSize:'12px',color:'#666'}}>{title}</span> : null}
                      <Tag color='primary' style={{borderRadius:4}}>三甲</Tag>
                    </div>
                    <div style={{marginTop:4,fontSize:'13px',color:'#666'}}>{hospital}  {dept}</div>
                  </div>
                </div>

                <div style={{display:'flex',gap:8,margin:'8px 0'}}>
                  <Tag color='primary' fill='outline' style={{borderRadius:12}}>图文咨询</Tag>
                  <Tag color='success' fill='outline' style={{borderRadius:12}}>电话咨询</Tag>
                  <Tag color='warning' fill='outline' style={{borderRadius:12}}>优选药房</Tag>
                </div>

                <div style={{fontSize:'13px',color:'#555',lineHeight:1.6}}>{desc}</div>

                <div style={{display:'flex',gap:16,color:'#888',fontSize:'12px',marginTop:8}}>
                  <span>好评率 <b style={{color:'#ff6b00'}}>{good}%</b></span>
                  <span>锦旗 {item?.flagnum || 127}</span>
                  <span>浏览人次 <b style={{color:'#ff6b00'}}>{view}</b></span>
                </div>

                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:8}}>
                  <div style={{color:'#ff6b00',fontWeight:600}}>¥{price}<span style={{color:'#999',fontSize:'12px'}}> 起</span></div>
                  <button onClick={()=>nav('/chat')} style={{background:'#1677ff',color:'#fff',border:'none',borderRadius:16,padding:'6px 12px'}}>问医生</button>
                </div>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}

export default Index
